<template>
  <div id="cursor-root" ref="cursor"></div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
@Options({})
export default class Cursor extends Vue {
  public mounted(): void {
    const obj = this.$refs.cursor;
    console.log(obj);
    if (obj instanceof HTMLElement) {
      // 组件的坐标
      let ObjX = 0;
      let ObjY = 0;
      // 与鼠标对应的实时坐标
      let X = 0;
      let Y = 0;
      // 运动速率
      let speed = 10;
      let index = 0;

      window.addEventListener("mousemove", function (xyz) {
        X = xyz.x - obj.offsetLeft - obj.clientWidth / 2;
        Y = xyz.y - obj.offsetTop - obj.clientHeight / 2;
        index = 0;
      });
      setInterval(() => {
        index++;
        if (index <= speed) {
          ObjX += X / speed;
          ObjY += Y / speed;
        }
        obj.style.top = ObjY + "px";
        obj.style.left = ObjX + "px";
      }, 10);
    }
  }
}
</script>

<style lang="scss">
#cursor-root {
  width: 36px;
  height: 36px;
  position: absolute;
  border: 1px solid #DFDFDF;
  pointer-events: none;
}
</style>
